<template>
  <div id="reg">
      <div class="Reg-box">
          <img src="../assets/images/help.png" alt="" />
      </div>
      <div class="Reg-heand">
          <h2>欢迎登录小米有品</h2>
      </div>
      <div class="df-input">
          <div class="reg-top">
              <input type="text" placeholder="邮箱/手机号码/小米ID" v-model="username">
        </div>
      <div class="df-bottom">
            <input type="text" placeholder="密码" v-model="password">
      </div>
      <div style="margin-top: 20px">
          <van-button
              round
              block
              type="info"
              native-type="submit"
              style="background-color: #e1b87b; border: 0; font-size: 18px"
              @click="login()"
            >
          注册
          </van-button>
      </div>
      <div style="margin-top: 20px">
          <van-button
              round
              block
              type="info"
              native-type="submit"
              style="background-color: #f0f0f0; border: 0"
          >
              <span>登录/注册</span>
          </van-button>
      </div>
      <div class="links">暂时不支持手机号验证码</div>
          <van-divider style="color: #666666">  其他方式登录</van-divider>
      <div class="Reg-price">
          <ul>
            <li><img src="../assets/images/1a.jpg"></li>
            <li><img src="../assets/images/2a.jpg"></li>
            <li><img src="../assets/images/3a.jpg"></li>
            <li><img src="../assets/images/4a.jpg"></li>
          </ul>
 </div>
    </div>
  </div>
</template>
<script>
import { zhuce, Login } from "../api/zhuc";
export default {
  name: "reg",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    login() {
      if (this.username == "" || this.password == "") {
        alert("请输入用户名或密码");
      } else {
        let data = { username: this.username, password: this.password };
        /*接口请求*/
        Login(this.username,this.password).then(req => {
          console.log(res);
          /*接口的传值是(-1,该用户不存在),(0,密码错误)，*/
        });
      }
    }, }};
</script>

<style scoped>
#reg {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url(../assets/images/img.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.Reg-box {
  height: 55px;
}
.Reg-box img {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 10px;
  right: 12px;
}
.Reg-heand {
  height: 80px;
}
.Reg-heand h2 {
  color: #747774;
  margin: 16px 0px;
  font-weight: normal;
  text-align: center;
  margin-top: 25px;
}
.df-input {
  width: 322px;
  height: 430px;
  margin: 0 auto;
}
.reg-top {
  height: 40px;
  margin-top: 15px;
  text-align: left;
  border-bottom: 1px solid #6666;
}
.reg-top span {
  text-align: left;
  margin-right: 10px;
  color: #9b9b9b;
}
.reg-top input {
  border: 0;
}
.df-bottom {
  height: 45px;
  margin-top: 15px;
  text-align: left;
  border-bottom: 1px solid #6666;
}
.df-bottom input {
  width: 170px;
  height: 30px;
  border: 0;
  margin-left: 8px;
}
.verificatior {
  text-align: right;
  margin-top: -27px;
}
.verificatior a {
  color: #c49c63;
}
.van-button span {
  color: #6666;
}
.links {
  width: 100%;
  height: 30px;
  text-align: center;
  margin-top: 30px;
  color: #9b9b9b;
}
.Reg-price {
  height: 50px;
  background-color: #fff;
  margin-top: 22px;
  padding: 0px 68px;
}
.Reg-price ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.Reg-price ul li {
  text-align: center;
  margin-top: 2px;
}
</style>